.loginRouterTransition-enter-active,
.loginRouterTransition-leave-active {
    transition: opacity .2s ease-in-out;
}

.loginRouterTransition-enter-active {
    -webkit-animation: slide-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.loginRouterTransition-leave-active {
    -webkit-animation: slide-right 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-right 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.loginRouterTransition-enter-from,
.loginRouterTransition-leave-to {
    opacity: 0;
}

@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}
